<template>
	<view class="page bg-fff">
		<up-swiper indicator indicatorActiveColor="#33333" :list="imagesList" :height="swiperHeight" radius="0" @click="clickBanner"></up-swiper>

		<view class="left-14 right-14">
			<view class="titleWrap top-20 bottom-20">
				<text class="col-theme fontBold right-10">测试项目</text>
				<text class="title fontBold">测试标题</text>
			</view>

			<rich-text :nodes="contentTxt"></rich-text>
		</view>

		<up-gap height="70"></up-gap>

		<view class="bottomWrap bg-fff flex border-top-grey">
			<view class="logoWrap flex left-14">
				<image class="logoImg" src="https://shoss.ipangsell.com/xcx/xpIcon.png" mode="aspectFit"></image>
				<text class="left-10">小胖看房</text>
			</view>
			<view class="rightWrap flex right-14">
				<button class="clearBtn txtBtn border-grey boxShow" @click="addXp">添加小胖君</button>

				<button class="clearBtn iconBtn bg pengBg" open-type="share"></button>

				<button class="clearBtn iconBtn bg shareBg" open-type="share"></button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onShareAppMessage, onShareTimeline, onAddToFavorites } from '@dcloudio/uni-app';
import { getImgInfo } from '@/common/canvas-tools';

let swiperHeight = ref(300);
let newsId = ref('');
let imagesList = ref([
	'https://image.srea.org.cn/xcx/home-banner-img.png',
	'https://image.srea.org.cn/xcx/query-tools-top-bg.jpg',
	'https://image.srea.org.cn/xcx/shangshi-yugao-top-bg.jpg'
]);

let contentTxt = ref('测试第一行内容<br>测试第二行内容<br>测试第三行内容\n哈哈哈');

onShareAppMessage(() => {
	return {
		title: `测试标题`,
		// path: `/pages/menus/fans/detail?productId=${this.product_id}&puid=${this.userInfo.id}&share=true&title=${this.title}&prepage=粉丝房源详情-${this.product_id}-${this.title}`,
		imageUrl: imagesList.value[0],
		//#ifdef MP-TOUTIAO
		templateId: ''
		//#endif
	}
})
		
//#ifdef MP-WEIXIN
onShareTimeline(() => {
	return {
		title: `测试标题`,
		imageUrl: imagesList.value[0],
		// query: `productId=${this.product_id}&puid=${this.userInfo.id}&share=true&title=${this.title}&prepage=粉丝房源详情-${this.product_id}-${this.title}`
	}
})
//#endif

onAddToFavorites(() => {
	return {
		title: `测试标题`,
		imageUrl: imagesList.value[0],
		// query: `productId=${this.product_id}&kaiId=${this.kaiPanId}&puid=${this.userInfo.id}&share=true&title=${this.product.title}&prepage=楼盘详情页-${this.product.id}-${this.product.title}`
	}
})

onLoad((options) => {
	newsId.value = options.newsId;
	uni.$check_and_login(init);
});

// 初始化
async function init() {
	await getImgInfoList();
	// const res = await getNewsDetail(newsId.value);
	// imagesList.value = res.detail.images;
}

// 获取图片信息设置swiperHeight
async function getImgInfoList() {
	// 获取所有图片的高度，设置swiperHeight为等比缩放后最高的图片高度
	let maxHeight = 0;
	const heights = [];
	let deviceWidth = uni.getWindowInfo().windowWidth;
	for(let i=0; i<imagesList.value.length; i++) {
		try {
			const imgInfo = await getImgInfo(imagesList.value[i]);
			const scale = imgInfo.height / imgInfo.width;
			const scaledHeight = Math.round(deviceWidth * scale);
			heights[i] = scaledHeight || 0;
		} catch (e) {
			// 处理 getImageInfo:fail invalid 错误，使用默认高度
			heights[i] = 300; // 默认高度
		}
	}
	maxHeight = Math.max(...heights);

	swiperHeight.value = maxHeight === 0 || maxHeight > 300 ? 300 : maxHeight;
}

// 点击banner
const clickBanner = (index) => {
	uni.previewImage({
		urls: imagesList.value,
		current: index
	});
}

//点击添加小胖君
const addXp = () => {
	uni.previewImage({
		urls: ['https://shoss.ipangsell.com/xcx/mortgage.jpg']
	});
}
</script>

<style lang="scss" scoped>
.page{
	min-height: 100vh;
	overflow: hidden;
	.bottomWrap{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		padding: 40rpx 0;
		justify-content: space-between;
		.logoWrap{
			.logoImg{
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
			}
		}
		.rightWrap{
			gap: 20rpx;
			.txtBtn{
				background-color: #fff;
				padding: 6rpx 20rpx;
				border-radius: 25rpx;
				line-height: 1.4;
				font-size: 24rpx;
			}
			.iconBtn{
				width: 40rpx;
				height: 40rpx;
				line-height: 1.4;
				background-size: 100%;
			}
			.pengBg{
				background-image: url("https://shoss.ipangsell.com/xcx/icon/icon-detail-pengyouquan.png");
			}
			.shareBg{
				background-image: url("https://shoss.ipangsell.com/xcx/icon/icon-share-theme-png.png");
			}
		}
	}
}
</style>
